<template>
  <div class="subject-container">
    <!-- 卡片 -->
    <el-card>
      <!-- 搜索表单 -->
      <el-row>
        <el-col :span="18">
          <el-form ref="form" inline label-width="80px" size="mini">
            <el-form-item label="学科名称">
              <el-input v-model="requestObj.subjectName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="requestObj.subjectName=''">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span='6'>
          <el-button type="success" icon="el-icon-edit" size="mini" style="float: right" @click="addSubjectDialog = true">新增学科</el-button>
        </el-col>
      </el-row>

      <!-- 新增学科对话框 -->
      <el-dialog title="新增学科" :visible.sync="addSubjectDialog" width="25%" @close='onClose'>
        <el-form :model="addRuleForm" :rules="rules" ref="addRuleForm">
          <el-form-item label="学科名称" prop="name" label-width="80px">
            <el-input v-model="addRuleForm.name" placeholder="请输入学科名称"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" class="isShow">
            <el-switch v-model="addRuleForm.delivery" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addSubjectDialog = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 数据统计 -->
      <el-alert class="dataTotal" :title='`数据一共${total}条`' type="info" show-icon :closable="false">
      </el-alert>
      <!-- 表格 -->

      <el-table :data="subjectList" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column label="创建日期" width="180">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay===1?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="totals" label="题目数量"></el-table-column>
        <el-table-column label="操作" width="249">
          <template slot-scope="scope">
            <el-link type="primary" :underline=" false" @click="$router.push({path:'/subjects/directorys',query:{id:scope.row.id,name:scope.row.subjectName}})">学科分类</el-link>
            <el-link type="primary" :underline=" false" @click="onGoTags(scope.row)">学科标签</el-link>
            <el-link type="primary" :underline=" false" @click="onUpdateView(scope.row)">修改</el-link>
            <el-link type="primary" :underline=" false" @click="onDelete(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改对话框 -->
      <el-dialog title="修改学科" :visible.sync="updateSubjectDialog" width="25%">
        <el-form :model="editRuleForm" :rules="rules" ref="ruleForm">
          <el-form-item label="学科名称" prop="name" label-width="80px">
            <el-input v-model="editRuleForm.name" placeholder="请输入学科名称"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" class="isShow">
            <el-switch v-model="editRuleForm.delivery" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateSubjectDialog = false">取 消</el-button>
          <el-button type="primary" @click="onUpdate">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <!-- size-change	pageSize 改变时会触发 每页条数 -->
        <!-- current-page	当前页数 -->
        <el-pagination class='subject_pagination' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="requestObj.page" :page-sizes="[2, 5, 10, 15]" :page-size="requestObj.pagesize" layout=" prev, pager, next, sizes, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { list, add, update, remove } from "@/api/hmmm/subjects";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      requestObj: {
        subjectName: "", // 学科名称
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸 每页条数
      },
      total: 0, // 总条数
      subjectList: [], // 表格数据源
      addSubjectDialog: false, // 新增学科对话框的显示与隐藏
      updateSubjectDialog: false, // 修改学科对话框的显示与隐藏
      addRuleForm: {
        name: "",
        delivery: true,
      },
      editRuleForm: {
        name: "",
        delivery: null,
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      id: 0, // 获取学科列表id
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getSubjectList(); //获取表格数据
  },
  mounted() {},
  methods: {
    async getSubjectList() {
      const { data } = await list(this.requestObj);
      console.log(data);
      this.total = data.counts;
      this.subjectList = data.items;
      // this.subjectList.forEach((item) => {
      //   this.subjectItem = item;
      // })
    },

    // 每页条数
    handleSizeChange(val) {
      this.requestObj.pagesize = val;
      this.getSubjectList();
    },
    // 当前页数
    handleCurrentChange(val) {
      this.requestObj.page = val;
      this.getSubjectList();
    },

    // 去学科标签页
    onGoTags(item) {
      const i = this.$router.push({
        path: "/subjects/tags",
        query: {
          id: item.id,
          name: item.subjectName,
        },
      });
    },
    // 搜索学科
    onSearch() {
      this.requestObj.page = 1;
      this.getSubjectList(this.requestObj.subjectName);
    },

    // 点击确定新增学科
    onConfirm() {
      this.$refs.addRuleForm.validate(async (valid) => {
        if (valid) {
          const { data } = await add({
            subjectName: this.addRuleForm.name,
            isFrontDisplay: this.addRuleForm.delivery === true ? 1 : 0,
          });
          // 重新渲染数据
          this.getSubjectList();
          // 关闭对话框
          this.addSubjectDialog = false;
          // 重置表单
          this.$refs.addRuleForm.resetFields();
          this.$message.success("添加学科成功");
        } else {
          this.$message.error("添加学科失败");
          return false;
        }
      });
    },
    // 修改学科
    onUpdateView(item) {
      // 打开对话框
      this.updateSubjectDialog = true;
      // 把学科名称和是否显示赋值给input框
      this.editRuleForm.name = item.subjectName;
      this.editRuleForm.delivery = item.isFrontDisplay === 1 ? true : false;

      // 获取学科列表id
      this.id = item.id;
    },
    // 点击确定修改
    onUpdate() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const { data } = await update({
            id: this.id,
            subjectName: this.editRuleForm.name,
            isFrontDisplay: this.editRuleForm.delivery,
          });
          this.getSubjectList();
          this.updateSubjectDialog = false;
          this.$message.success("修改学科成功");
        } else {
          this.$message.error("修改学科失败");
          return false;
        }
      });
    },
    // 删除学科
    onDelete(id) {
      this.$confirm("此操作将永久删除该学科, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await remove({ id });
          this.getSubjectList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    onClose() {
      console.log(1);
      this.$refs.addRuleForm.resetFields();
      this.addRuleForm.delivery = true;
    },
  },
};
</script>

<style scoped lang="scss">
.subject-container {
  padding: 20px 15px;
  .dataTotal {
    margin-bottom: 15px;
  }
  .isShow {
    margin-left: 12px;
  }
}
.subject_pagination {
  float: right;
  margin: 15px;
}
.el-link {
  margin-right: 10px;
}
::v-deep .el-dialog__footer {
  text-align: right;
}
</style>
